<template>
   <el-main>
    <!-- 搜索栏 -->
    <el-form :model="searchParm" :inline="true" size="default">
        <el-form-item>
            <el-select 
              v-model="searchParm.categoryId" 
              class="m-2" 
              placeholder="请选择公告类型" 
              size="default"
             >
                <el-option 
                  v-for="item in selectList"
                    :key="item['value']"
                    :label="item['label']"
                    :value="item['value']"/>  
            </el-select>           
        </el-form-item>
        <el-form-item>
            <el-input v-model="searchParm.noticeTitle" placeholder="请输入公告的名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="searchBtn" icon="Search">搜索</el-button>
            <el-button @click="resetBtn" type="danger" plain icon="Close">重置</el-button>
            <el-button icon="Plus" type="primary" @click="addBtn">新增</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
    <!--表格-->
    <el-table :height="tableHeight" :data="tableList" border stripe>
        <el-table-column prop="noticeTitle" label="标题"></el-table-column>
        <el-table-column prop="noticeText" label="内容"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="220" align="center">
            <template #default="scope">
                <el-button type="primary" icon="Edit" size="default" @click="ediBtn(scope.row)">编辑</el-button>
                <el-button type="danger" icon="Delete" size="default" @click="deleteBtn(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="searchParm.currentPage"
            :page-sizes="[10,20, 40, 80, 100]"
            :page-size="searchParm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchParm.total" background>
            
        </el-pagination>
   </el-main>
   <!--新增弹框-->
   <SysDialog
   :title="dialog.title"
   :width="dialog.width"
   :visible="dialog.visible"
   :height="dialog.height"
   @on-close="onClose"
   @on-confirm="conmmit"
   >
        <template v-slot:content>
            <el-form :model="addModel" ref="addRef" :rules="rules" label-width="80px" :inline="false" size="normal">
                <el-form-item prop="cagegoryId" label="公告类型">
                   <el-select 
                     style="width: 100%"
                     v-model="addModel.cagegoryId" 
                     class="m-2"
                     placeholder="请选择公告类型"
                     size="default"
                     >
                    <el-option v-for="item in selectList"
                    :key="item['value']"
                    :label="item['label']"
                    :value="item['value']">
                    </el-option>
                   </el-select>
                   
                </el-form-item>
                <el-form-item prop="noticeTitle" label="公告标题">
            <el-input v-model="addModel.noticeTitle" placeholder="请输入公告的名称"></el-input>
        </el-form-item>
        <el-form-item prop="noticeText" label="公告内容">
            <el-input :rows="5" type="textarea" v-model="addModel.noticeText" placeholder="请输入公告的内容"></el-input>
        </el-form-item>
            </el-form>
            
        </template>
   </SysDialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref ,nextTick} from 'vue';
import {getCateListApi} from '@/api/notice_category/index'
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { ElMessage, FormInstance } from 'element-plus';
import {addApi,getListApi,Notice,editApi,deleteApi} from '@/api/notice/index'
import useInstance from '@/hooks/useInstance';

const {global} = useInstance()
//增加表单属性
const addRef = ref<FormInstance>()
//弹框属性
const {dialog,onClose,onShow} = useDialog()
//搜索绑定对象
const searchParm = reactive({
    currentPage:1,
    pageSize:10,
    categoryId:'',
    noticeTitle:'',
    total:0
})
const tags = ref('')
//新增按钮
const addBtn = ()=>{
    tags.value = "0";
    //清空表单
    addRef.value?.resetFields();
    dialog.title = '新增'
    onShow()
}
//编辑
const ediBtn = (row:Notice)=>{
    tags.value = "1";
    console.log(row)
    //清空表单
    addRef.value?.resetFields();
    dialog.title = '新增'
    onShow()
    //数据回显
    nextTick(()=>{
        Object.assign(addModel,row)
    })
}
//删除
const deleteBtn = async(row:Notice)=>{
    console.log(row)
    const confirm = await global.$myconfirm('确定删除该数据吗？')
    if(confirm){
        let res = await deleteApi(row.noticeId)
        if(res && res.code == 200){
            ElMessage.success(res.msg)
            onClose();
            //刷新表格
            getList()
        }
    }
}
//下拉数据
const selectList = ref([])
//查询类型下拉
const getCateList = async()=>{
    let res = await getCateListApi()
    if(res && res.code ==200){
        selectList.value = res.data;
    }
}
//新增绑定对象
const addModel = reactive({
    noticeId:'',
    cagegoryId:'',
    noticeTitle:'',
    noticeText:""
})
//表单验证规则
const rules = reactive({
    cagegoryId: [
    {
      required: "true",
      trigger: ["blur","change"],
      message: "请填写公告类型",
    },
  ],
  noticeTitle: [
    {
      required: "true",
      trigger: ["blur","change"],
      message: "请填写公告名称",
    },
  ],
  noticeText: [
    {
      required: "true",
      trigger: ["blur","change"],
      message: "请填写公告内容",
    },
  ],
})
//表单提交
const conmmit = ()=>{
    addRef.value?.validate(async(valid) =>{
        if(valid){
            let res = null;
            if(tags.value == '0'){
                res = await addApi(addModel);
            }else{
                res = await editApi(addModel)
            }
            if(res && res.code == 200){
                ElMessage.success(res.msg)
                onClose();
                //刷新表格
                getList()
            }
        }
    })
}

//页容量改变时触发
const sizeChange = (size: number) => {
    console.log(size);
    searchParm.pageSize = size;
    getList();
  };
  //页数改变时触发
  const currentChange = (page: number) => {
    console.log(page);
    searchParm.currentPage = page;
    getList();
  };
  //搜索
  const searchBtn = ()=>{
    getList()
  }
  //重置
  const resetBtn = ()=>{
    searchParm.categoryId = ''
    searchParm.currentPage = 1
    searchParm.noticeTitle = ''
    getList()
  }
//表格数据
const tableList = ref([])
//获取表格数据
const getList = async()=>{
    let res = await getListApi(searchParm)
    if(res && res.code == 200){
        tableList.value = res.data.records;
        searchParm.total = res.data.total;
    }
}
//表格高度
const tableHeight = ref(0)
onMounted(()=>{
    getCateList()
    getList()
    nextTick(()=>{
        tableHeight.value = window.innerHeight - 230
    })
})
</script>

<style scoped>

</style>


